<template>
  <div
    class="top"
    style="
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #ffffff;
      padding: 10px;
    "
  >
    <div style="display: flex">
      <div>
        <el-select v-model="form.company" placeholder="请选择公司">
          <el-option label="陕重汽有限公司" value="陕重汽有限公司" />
          <el-option label="广汽有限公司" value="广汽有限公司" />
        </el-select>
      </div>
      <div style="margin-left: 15px; margin-right: 15px">
        分析维度：
        <el-select v-model="form.dimension" placeholder="请选择">
          <el-option label="按月度分析" value="按月度分析" />
          <el-option label="按季度分析" value="按季度分析" />
        </el-select>
      </div>
      <div>
        申报期：
        <el-date-picker type="month" placeholder="请选择" />
      </div>
    </div>
    <div>
      <el-tooltip effect="light" placement="top-start">
        <div slot="content">{{ scaleMode }}模式</div>
        <!-- 模式切换按钮 -->
        <el-button
          class="toggleModeBtn"
          type="text"
          size="medium"
          @click="toggleMode"
          :icon="`el-icon-refresh-${
            this.scaleMode === 'cover' ? 'left' : 'right'
          }`"
        />
      </el-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  name: "KbHeader",
  components: {},
  data() {
    return {
      form: {
        company: undefined,
        dimension: undefined,
      },
      scaleMode: "cover",
    };
  },

  computed: {},

  created() {},

  methods: {
    toggleMode() {
      this.scaleMode = this.scaleMode === "cover" ? "contain" : "cover";
      this.$emit("toggleMode", this.scaleMode);
    },
  },
};
</script>
<style  scoped lang="scss">
.toggleModeBtn {
  padding: 0;
  font-size: 20px;
  font-weight: 700;
}
</style>
